import React, { Component } from 'react'
import './header.scss'
import {  withRouter } from 'react-router-dom'
import { get , remove , set } from '../../axios/localstorage'
import { message } from 'antd'
import { getApiUserInfo , getApiSend , getApiLogin , getApiresetpwd , getApiCompenyList , getApiGlobalList , getApiRegister } from "../../axios/api"
import { connect } from 'react-redux'

 class header extends Component {

  state = {
    type:1,
    isLogin:false,
    isUser:false,
    showUser:false,
    showSearch:false,
    keywords:'',
    showlately:false,
    outAlert:false,
    show:false,
    showBg:false,
    userinfo:{},
    key:"",
    companyId:"",

    resAlert:false,

    success_alert:false,

    showLogin:false,
    showRegister:false,
    account:'',
    password:'',
    newpassword:'',
    confirmpassword:'',
    code:'',
    isforget:true,
    showMsg:false,
    showMsg2:false,
    showMore:false,
    msg:'',
    msg2:'',
    forget_alert:false,
    alert:false,
    isSend:false,
    showCompany:false,
    countDownNum:60,

    phone:'',
    mobile:"",
    email:"",
    username:"",
    s_number:"",
    truename:"",
    companyList:[],
    company:"",

    sData:{
      class:[],
      down:[],
      honor:[],
      live:[],
      news:[],
      sign:[],
    }
  }

  componentWillMount(){
    let token = get('token');
    if(token){
      if(this.state.showUser){

      }else{
        this.setState({
          showUser:true
        })

        let data = get('userinfo');

        if(data){
          this.setState({
            userinfo:data
          })
        }
      }
    }
  }

  componentDidMount(){
    console.log(this.props);

    window.addEventListener("scroll", ()=>{
      const top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

      if(top > 400){
        this.setState({
          showBg:true
        })
      }else{
        this.setState({
          showBg:false
        })
      }
    });

    
  }

  componentWillReceiveProps(){
    if(this.props.location.pathname === '/user'){
      this.getUserInfo();
    }

    if(this.props.location.pathname === '/home'){
      this.getUserInfo();
    }

    console.log(5678);

    
  }

  getCompany=()=>{
    getApiCompenyList({
      type:get('type')?get('type'):0,
    })
    .then( req =>{
        if(req.data.code === 1){
            let data = req.data.data;
            this.setState({
                companyList:data
            })
        }
    }).catch( err =>{
        console.error(err);
    })
  }

  gotoTab=(type)=>{
   
    if(type === 1){
      this.props.history.push('/home');
    }else if(type === 2){
      this.props.history.push('/test');
    }else{
      this.props.history.push('/about');
    }
  }

  gotoOut=()=>{

    this.setState({
      outAlert:false,
    })

    remove('token');

    if(get('city')){
      this.props.history.push('/index');
    }else{
      this.props.history.push('/home');
    }


  }

  gotoLogin=()=>{
    this.props.history.push('/login');
  }
  // gotoRegister=()=>{
  //   this.props.history.push('/login?type=1');
  // }
  // gotoRegister=()=>{
  //   this.props.history.push('/login?type=1');
  // }
  gotoRegister=()=>{

    if(!this.state.username){
        this.setState({
            showMsg:true,
            msg:"请先输入用户名！"
        })

        return false;
    }

    if(!this.state.username){
        this.setState({
            showMsg:true,
            msg:"请先输入密码！"
        })

        return false;
    }

    if(!this.state.s_number){
        this.setState({
            showMsg:true,
            msg:"请先输入学号！"
        })

        return false;
    }
    if(!this.state.truename){
        this.setState({
            showMsg:true,
            msg:"请先输入真实姓名！"
        })
        return false;
    }
    if(!this.state.email){
        this.setState({
            showMsg:true,
            msg:"请先输入邮箱！"
        })
        return false;
    }
    if(!this.state.phone){
        this.setState({
            showMsg:true,
            msg:"请先输入手机号！"
        })
        return false;
    }
    if(!this.state.code){
        this.setState({
            showMsg:true,
            msg:"请先输入验证码！"
        })
        return false;
    }
    
    let param = {
        username:this.state.username,
        password:this.state.password,
        truename:this.state.truename,
        s_number:this.state.s_number,
        email:this.state.email,
        mobile:this.state.phone,
        company:this.state.companyId,
        code:this.state.code,
        type:get('type')?get('type'):0,
    }

    getApiRegister(param)
    .then( req =>{
        if(req.data.code === 1){
            message.success("注册成功，请登录！");
            this.setState({
                resAlert:true,
                showRegister:false,
            })
        }else{
            this.setState({
                showMsg:true,
                msg:req.data.msg,
            })
        }
    }).catch( err =>{
        console.error(err);
    })
}
  gotoPage=(page)=>{

    if(this.props.location.pathname === '/exam'){
      this.props.showOutAlert(page);
      return false;
    }

    this.setState({
      showMore:false
    })

    console.log(page);

    this.props.history.push(page);
  }

  getUserInfo=()=>{

    if(!get('token')){
      return false;
    }
    let param = {
      token:get('token')
    }

    getApiUserInfo(param)
    .then( req =>{
      console.log(req.data)
      if(req.data.code === 1){
        this.setState({
          userinfo:req.data.data
        })
      }
    }).catch( err =>{
      console.error(err)
    })
}

  showUser=()=>{
      let token = get('token');
      console.log(token);

      // this.setState({
      //   isUser:true
      // })
      if(token){
        this.setState({
          isUser:true
        })
      }else{
        this.setState({
          isLogin:true
        })
      }
  }

  hideMenu=()=>{
    setTimeout(()=>{
      this.setState({isLogin:false,isUser:false})
    },100)
  }

  gotoMyNews=()=>{
    if(get('token')){
      this.props.history.push('/mynews');
    }else{
      message.info('请先登录！');
      this.props.history.push('/login');
    }
  }

  gotoBack=()=>{
    if(this.props.backOption){
      this.props.backOption();
    }else{
      window.history.go(-1)
    }
    
  }

  countDown=() =>{ 
    let countDownNum = this.state.countDownNum-1;//获取倒计时初始值
    //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
    this.timer = setInterval(() => {


        if(countDownNum<=0){
            clearInterval(this.timer);
            this.setState({ countDownNum:60,  isSend: false })
        }else{
            this.setState({
                countDownNum:(countDownNum--)
            })
        }
    }, 1000);
}

clear=()=>{
  this.setState({
    // showLogin:false,
    msg2:"",
    showMsg2:false,
    msg:"",
    showMsg:false,
    account:"",
    password:"",
    phone:"",
    mobile:"",
    email:"",
    newpassword:"",
    confirmpassword:"",
    code:"",
    s_number:"",
    username:"",
    truename:"",
    company:"",
    isSend:false,
    countDownNum:60,
  })

  if(this.props.loginType){
    this.props.hideLoginType()
  }
}

gotoSend=()=>{

    if(!this.state.phone){
        this.setState({
            msg:'请先输入手机号！',
            showMsg:true
        })
        return false;
    }

    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

    if (!myreg.test(this.state.phone)) {
        this.setState({
            msg:'请输入准确的手机号码！',
            showMsg:true
        })
        return false;
    }

    let event = this.state.showRegister?'register':"resetpwd";


    let param = {
        mobile:this.state.phone,
        event
    }

    getApiSend(param)
    .then( req =>{
        console.log(req.data)
        if(req.data.code === 1){
            this.setState({
                isSend:true
            })
            this.countDown();
        }else{
            this.setState({
                msg:req.data.msg,
                showMsg:true
            })
        }
    }).catch( err =>{
        console.error(err);
    })


    
    
}

gotoHome=()=>{


    if(!this.state.account){
        this.setState({
            msg:'请先输入账号！',
            showMsg:true
        })
        return false;
    }

    if(!this.state.password){
        message.info('请先输入密码！');
        this.setState({
            msg:'请先输入账号！',
            showMsg:true
        })
        return false;
    }

    let param = {
        account:this.state.account,
        password:this.state.password,
    }

    getApiLogin(param)
    .then( req =>{
        console.log(req.data)
        if(req.data.code === 1){
            let data = req.data.data.userinfo;
            set("token",data.token);
            
            if(this.state.isforget){
                set('psw',param);
            }else{
                remove('psw');
            }

            message.success(req.data.msg);
            this.setState({
                showLogin:false
            })

            if(this.props.loginType){
              this.props.hideLoginType();
              window.location.reload();
            }

            getApiUserInfo({
              token:data.token,
              type:get('type')?get('type'):0,
            })
            .then( reg =>{
                if(reg.data.code === 1){

                    let d = reg.data.data;

                    set("userinfo",d);

                    this.setState({
                      userinfo:d
                    })
                }
            }).catch(err =>{
                console.log(err);
            })

            

            // this.props.history.push('/home');
        }else{
            // message.info(req.data.msg);
            this.setState({
                showMsg:true,
                msg:req.data.msg
            })
        }
    }).catch( err =>{
        console.error(err)
    })
}



gotoChangePsw=()=>{


  if(!this.state.phone){
      this.setState({
          msg:'请先输入手机号！',
          showMsg:true
      })
      return false;
  }

  var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;

  if (!myreg.test(this.state.phone)) {
      
      this.setState({
          msg:'请输入准确的手机号码！',
          showMsg:true
      })
      return false;
  }

  

  if(!this.state.newpassword){
      this.setState({
          msg:'请先输入新密码！',
          showMsg:true
      })
      return false;
  }

  if(!this.state.confirmpassword){
      this.setState({
          msg:'请确认新密码！',
          showMsg:true
      })
      return false;
  }

  if(!this.state.code){
      this.setState({
          msg:'请先输入验证码！',
          showMsg:true
      })
      return false;
  }

  if(this.state.newpassword !== this.state.confirmpassword){
      this.setState({
          msg:'两次密码输入不一致！',
          showMsg:true
      })
      return false;
  }



  let param = {
      type:"mobile",
      mobile:this.state.phone,
      captcha:this.state.code,
      newpassword:this.state.newpassword,
  }

  getApiresetpwd(param)
  .then( req =>{
      console.log(req.data)
      if(req.data.code === 1){
          message.success("密码修改成功！")
          this.setState({
              forget_alert:false,
              success_alert:true
          })
      }else{
          this.setState({
              showMsg:true,
              msg:req.data.msg,
          })
      }
  }).catch( err =>{
      console.error(err);
  })

}

  render() {
    return (
      <div className={this.props.showTop?'header header_bg':"header"} >
        <div className='headerBg'></div>
        <div className="header_div">
          <div className="header_left">
            <div className={this.props.location.pathname === '/' || this.props.location.pathname === '/home' || this.props.location.pathname === '/index' ? "header_item header_active" :"header_item"} onClick={()=>{
              // if(get('type')){
              //   this.gotoPage('/index')
              // }else{
              //   this.gotoPage('/home')
              // }

              this.gotoPage('/home')
            }}>
              首页
              <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>
            <div className={this.props.location.pathname === '/news' || this.props.location.pathname === '/newsinfo' || this.props.location.pathname === '/notice'? "header_item header_active" :"header_item"} onClick={()=>{
              
              if(get('type')){
                // this.gotoPage('/notice')
                this.gotoPage('/news')
              }else{
                this.gotoPage('/news')
              }
              
              
              }}>
            新闻资讯
            <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>
            <div className={this.props.location.pathname === '/course' || this.props.location.pathname === '/courseinfo'? "header_item header_active" :"header_item"} 
            onClick={()=>{this.gotoPage('/course')}}>
              课程中心
              <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>
            <div className={this.props.location.pathname === '/live' || this.props.location.pathname === '/liveinfo'?  "header_item header_active" :"header_item"} onClick={()=>{this.gotoPage('/live')}}>
              直播中心
              <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>


            <div className={this.props.location.pathname === '/signup' || this.props.location.pathname === '/signupinfo' || this.props.location.pathname === '/productSignup'? "header_item header_active" :"header_item"} onClick={()=>{this.gotoPage('/signup')}}>
            活动报名
            <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>

            <div hidden={get('mechanism')} className={this.props.location.pathname === '/honor' || this.props.location.pathname === '/honorinfo'?  "header_item header_active" :"header_item"} onClick={()=>{this.gotoPage('/honor')}}>
            荣誉展示
            <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>

            <div className={this.props.location.pathname === '/works' || this.props.location.pathname === '/workinfo' || this.props.location.pathname === '/uploadwork'?  "header_item header_active" :"header_item"} onClick={()=>{this.gotoPage('/works')}}>
            作品展示
            <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>
            
            
            <div className={this.props.location.pathname === '/download' || this.props.location.pathname === '/downloadinfo' ? "header_item header_active" :"header_item"} onClick={()=>{this.gotoPage('/download')}}>
            下载专区
            <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>
            <div className={this.props.location.pathname === '/about'? "header_item header_active" :"header_item"} onClick={()=>{this.gotoPage('/about')}}>
            关于我们
            <div className="header_span">
                <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
              </div>
            </div>
            <div className={this.props.isUser ? "header_item header_active" :"header_item"} onMouseEnter={()=>{this.showUser()}} onMouseLeave={()=>{this.hideMenu()}} onClick={()=>{
            
              if(get('token')){
                this.gotoPage('/usercenter')
              }else{
                // this.gotoPage('/login')
                let data = get('psw');
        
                if(data){
                    
                    this.setState({
                        password:data.password,
                        account:data.account,
                        isforget:true
                    })
                }
                this.setState({
                  showLogin:true
                })
              }
              
              }}>
                {get('token')?"个人中心":"登录/注册"}
                <div className="header_span">
                  <img alt="" className='header_icon1' src="assets/imgs/sanjiaolv.png" />
                  <img alt="" className='header_icon2' src="assets/imgs/sanjiao.png" />
                </div>

                <div className="head_div" hidden={!this.state.isUser}>
                <div className="h_user" onClick={(ev)=>{ev.stopPropagation()}}>
                  <div className="h_u_info">
                    <div className='hubox'>
                      <img alt="" onClick={()=>{this.gotoPage('/usercenter')}} src={this.state.userinfo.avatar_text?this.state.userinfo.avatar_text:"assets/imgs/avatar.png"} />
                      <div>
                        <h2>{this.state.userinfo.nickname}</h2>
                        <p>{this.state.userinfo.mobile}</p>
                      </div>
                    </div>
                    <div className="hu_items" >
                      <div className="hu_item" onClick={()=>{this.gotoPage('/user')}} >
                        <img alt="" src="assets/imgs/i1.png" />
                        <p>个人信息</p>
                      </div>
                      <span></span>
                      <div className="hu_item" onClick={()=>{this.gotoPage('/mycourse')}} >
                        <img alt="" src="assets/imgs/i2.png" />
                        <p>我的课程</p>
                      </div>
                      <div className="hu_item" onClick={()=>{this.gotoPage('/mysubscribe')}} >
                        <img alt="" src="assets/imgs/i3.png" />
                        <p>我的预约</p>
                      </div>
                      <span></span>
                      <div className="hu_item" onClick={()=>{this.gotoPage('/mycertificate')}} >
                        <img alt="" src="assets/imgs/i4.png" />
                        <p>我的证书</p>
                      </div>
                    </div>
                  </div>
                  <div className="out" onClick={()=>{this.setState({outAlert:true})}}>
                    <img alt="" src="assets/imgs/out.png" />
                    <p>退出登录</p>
                  </div>
                </div>
              </div>
             

                {/* <div hidden={!get('token')}>
                  <div className="out" onClick={()=>{this.gotoOut()}}>
                    <img alt="" src="assets/imgs/out.png" />
                    <p>退出登录</p>
                  </div>
                </div> */}
            </div>
          </div>



          <div className='hes'>
          <input type="password" className='piput' name="xx" />
            <div className='header_search'>
              <input type="text" placeholder="输入搜索的内容" autocomplete="off" onBlur={()=>{
                setTimeout(()=>{
                  this.setState({showMore:false})
                },200)
              }} value={this.state.key} onChange={(ev)=>{
                
                this.setState({key:ev.target.value})

                let key =  ev.target.value;

                getApiGlobalList({
                  search:key,
                  type:get('type')?get('type'):0,
                  content:get('city')?get('city'):get('mechanism'),
                })
                .then( req=>{
                  if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                      showMore:true,
                      sData:data
                    })
                  }
                }).catch( err =>{
                  console.error(err);
                })
                
                }} />
              <div className='hs_div' onClick={()=>{
                set('search',this.state.key);
                this.setState({showMore:false})
                if(this.props.location.pathname === '/search'){
                  this.props.getNewData();
                  return false;
                }
                this.gotoPage('/search')}}>
                <img alt="" src="assets/imgs/sousuo.png" />
              </div>

              <div className='hs_info' hidden={!this.state.showMore}>
                <div className='hsi' hidden={this.state.sData.news.length === 0 || this.props.location.pathname === '/notice'}>
                  <h2>新闻资讯</h2>
                  {
                    this.state.sData.news.map((item,index)=>{
                      return <div className='hst' onClick={()=>{this.gotoPage('/newsinfo?id='+item.id+'&typeid=1')}}>
                                <img alt="" src="assets/img/sousuo-xinwen.png" />
                                <p>{item.title}</p>
                              </div>
                    })
                  }
                </div>
                <div className='hsi' hidden={this.state.sData.class.length === 0 || this.props.location.pathname === '/courseinfo'}>
                  <h2>课程中心</h2>

                  {
                    this.state.sData.class.map((item,index)=>{
                      return <div className='hst' onClick={()=>{this.gotoPage('/courseinfo?id='+item.id)}}>
                                <img alt="" src="assets/img/sousuo-kecheng.png" />
                                <p>{item.title}</p>
                              </div>
                    })
                  }
                </div>
                <div className='hsi' hidden={this.state.sData.live.length === 0 || this.props.location.pathname === '/liveinfo'}>
                  <h2>直播中心</h2>
                  {
                    this.state.sData.live.map((item,index)=>{
                      return <div className='hst' onClick={()=>{this.gotoPage('/liveinfo?id='+item.id)}}>
                                <img alt="" src="assets/img/sousuo-zhibo.png" />
                                <p>{item.title}</p>
                              </div>
                    })
                  }
                </div>
                <div className='hsi' hidden={this.state.sData.sign.length === 0 || this.props.location.pathname === '/signupinfo'}>
                  <h2>活动报名</h2>
                  {
                    this.state.sData.sign.map((item,index)=>{
                      return <div className='hst' onClick={()=>{this.gotoPage('/signupinfo?id='+item.id)}}>
                                <img alt="" src="assets/img/sousuo-huodong.png" />
                                <p>{item.title}</p>
                              </div>
                    })
                  }
                </div>
                <div className='hsi' hidden={this.state.sData.honor.length === 0 || this.props.location.pathname === '/honorinfo'}>
                  <h2>荣誉展示</h2>
                  {
                    this.state.sData.honor.map((item,index)=>{
                      return <div className='hst' onClick={()=>{this.gotoPage('/honorinfo?id='+item.id)}}>
                                <img alt="" src="assets/img/sousuo-rongyu.png" />
                                <p>{item.title}</p>
                              </div>
                    })
                  }
                </div>
                <div className='hsi' hidden={this.state.sData.down.length === 0 || this.props.location.pathname === '/download'}>
                  <h2>下载专区</h2>
                  {
                    this.state.sData.down.map((item,index)=>{
                      return <div className='hst' onClick={()=>{this.gotoPage('/download')}}>
                                <img alt="" src="assets/img/sousuo-xiazai.png" />
                                <p>{item.title}</p>
                              </div>
                    })
                  }
                </div>
              </div>
            </div>
          </div>



        </div>


        

        <div className="header_alert" hidden={!this.state.outAlert}>
          <div className="header_abox">
            <h2>退出登录</h2>
            <p>您确定要退出当前账号吗？</p>
            <div className="adiv">
              <button className="ad1" onClick={()=>{this.setState({outAlert:false})}}>取消</button>
              <button className="ad2" onClick={()=>{this.gotoOut()}}>确定</button>
            </div>
          </div>
        </div>

        <div className='header_alert' hidden={!this.state.showLogin && !this.props.loginType}>
          <div className="hbox">
              <div className="hcen">
                  <img alt="" src="assets/imgs/avatar.png" />
              </div>
              <img alt="" onClick={()=>{this.setState({showLogin:false});this.clear()}} className='hclose' src='assets/imgs/chacha.png' />

              <div className="item">
                  <input type="text" placeholder="账号" value={this.state.account} onChange={(ev)=>{this.setState({account:ev.target.value})}} />
              </div>
              <div className="item">
                  <input type="password" placeholder="密码" value={this.state.password} onChange={(ev)=>{this.setState({password:ev.target.value})}} />
              </div>
              <div className="rem">
                  <div className={this.state.isforget?"div dchosen":"div"} onClick={()=>{this.setState({isforget:!this.state.isforget})}}>
                      <img alt="" hidden={!this.state.isforget} src="assets/imgs/xuanzegou.png" />
                  </div>
                  <p>记住密码</p>
                  <h2 onClick={()=>{this.setState({forget_alert:true,showLogin:false});this.clear()}}>忘记密码？</h2>
              </div>
              <div className="lmsg">
                  <p hidden={!this.state.showMsg}>{this.state.msg}</p>
              </div>
              <button onClick={()=>{this.gotoHome()}}>登录</button>
              <div onClick={()=>{this.setState({showRegister:true,showLogin:false,});this.clear();this.getCompany()}} className="toregister">去免费注册</div>
            </div>
        </div>

        <div className="header_alert" hidden={!this.state.success_alert}>
          <div className="a_success" >
              <div className="acen">
                  <img alt="" src="assets/imgs/chenggong.png" />
              </div>
              <h2>密码修改成功！</h2>
              <p>请您用新的密码重新登录系统，感谢您的理解！</p>
              <div className="acen">
                  <button onClick={()=>{this.setState({
                    success_alert:false,
                    showLogin:true,
                    showRegister:false,
                  })}}>好的，去登录</button>
              </div>
          </div>
        </div>

        <div className="header_alert" hidden={!this.state.forget_alert}>
            <div className="forget_alert">
                <img className="close" onClick={()=>{this.setState({forget_alert:false});this.clear()}} alt="" src="assets/imgs/tankuangcha.png" />
                <h2>修改密码</h2>
                <div className="aitem">
                    <p>请输入手机号</p>
                    <input type="text" placeholder="请输入手机号" value={this.state.phone} onChange={(ev)=>{this.setState({phone:ev.target.value})}} />
                </div>
                <div className="aitem">
                    <p>请输入新密码</p>
                    <input type="password" placeholder="请输入新密码" value={this.state.newpassword} onChange={(ev)=>{this.setState({newpassword:ev.target.value})}} />
                </div>
                
                <div className="aitem">
                    <p>确认密码</p>
                    <input type="password" placeholder="确认密码" value={this.state.confirmpassword} onChange={(ev)=>{this.setState({confirmpassword:ev.target.value})}} />
                </div>
                <div className="aitem">
                    <p>请输入验证码</p>
                    <div className="aipt">
                        <input className="a2" type="text" placeholder="请输入验证码" value={this.state.code} onChange={(ev)=>{this.setState({code:ev.target.value})}} />
                        <h4 onClick={()=>{this.gotoSend()}}>{this.state.isSend?this.state.countDownNum+"s 后重发":"获取验证码"}</h4>
                    </div>
                </div>
                <div className="amsg">
                    <p hidden={!this.state.showMsg}>{this.state.msg}</p>
                </div>
                <button onClick={()=>{this.gotoChangePsw()}}>更新密码</button>
            </div> 
        </div>


        <div className="header_alert" hidden={!this.state.resAlert}>
            <div className="res_box">
                <div className="acen">
                    <img alt="" src="assets/imgs/chenggong.png" />
                </div>
                <h2>注册成功！</h2>
                <p>请您用注册的账号和密码重新登录系统，感谢您的理解！</p>
                <div className="acen">
                    <button onClick={()=>{this.setState({
                       showLogin:true,
                       showRegister:false,
                       resAlert:false,
                    })}}>好的，去登录</button>
                </div>
            </div>
        </div>

        <div className="header_alert" hidden={!this.state.showRegister}>
            <div className="res_main">
                    <img className="close" onClick={()=>{this.setState({showRegister:false});this.clear()}} alt="" src="assets/imgs/chacha.png" />
                    <div className="title">学员注册</div>
                    <div className="box">
                        <div className="item">
                            <p>用户名：</p>
                            <div className="ipt">
                                <input type="text" placeholder="输入用户名" value={this.state.username} onChange={(ev)=>{this.setState({username:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>密码：</p>
                            <div className="ipt">
                                <input type="password" placeholder="密码（6-16位字符组成，区分大小写）" value={this.state.password} onChange={(ev)=>{this.setState({password:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>学号：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入学号" value={this.state.s_number} onChange={(ev)=>{this.setState({s_number:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>单位：</p>
                            <div className="ipt" onClick={()=>{this.setState({showCompany:!this.state.showCompany})}} >
                                {/* <input type="text" placeholder="请输入单位" value={this.state.company} onChange={(ev)=>{this.setState({company:ev.target.value})}} /> */}
                                <h2 className={this.state.company?"":"i_none"}>{this.state.company?this.state.company:"请选择单位"}</h2>
                                <img alt="" src="assets/imgs/xialaxuanze.png" />
                                <div className="sels" hidden={!this.state.showCompany} onMouseLeave={()=>{this.setState({showCompany:false})}}>
                                    {
                                        this.state.companyList.map((item,index)=>{
                                            return <h4 key={index} className={this.state.company === item.company_name?'hover':''} onClick={()=>{this.setState({company:item.company_name,companyId:item.id})}}>{item.company_name}</h4>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        <div className="item">
                            <p className="pwt">真实姓名：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入真实姓名" value={this.state.truename} onChange={(ev)=>{this.setState({truename:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>邮箱：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入邮箱" value={this.state.email} onChange={(ev)=>{this.setState({email:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>手机号：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入手机号码" value={this.state.phone} onChange={(ev)=>{this.setState({phone:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>验证码：</p>
                            <div className="ibox">
                                <div className="ipt2">
                                    <input type="text" placeholder="请输入验证码" value={this.state.code} onChange={(ev)=>{this.setState({code:ev.target.value})}} />
                                </div>
                                <div onClick={()=>{this.gotoSend()}} className="sendbox" hidden={this.state.isSend}>发送验证码</div>
                                <div className="sendbox2" hidden={!this.state.isSend}>{this.state.countDownNum}s 后重发</div>
                            </div>
                        </div>
                        <div className="lmsg">
                            <p hidden={!this.state.showMsg}>{this.state.msg}</p>
                        </div>
                        <button onClick={()=>{this.gotoRegister()}}>注册</button>
                        <div onClick={()=>{this.setState({showLogin:true,showRegister:false});this.clear()}} className="tologin">已有账号，直接登录</div>
                    </div>
                </div>
        </div>

      </div>
    )
  }
}

const mapStateToProps = state => {

  
  return {
    msgNum: state.msgNum,
    info: state.info,
  }
};


export default withRouter(connect(mapStateToProps)(header));